<template>
  <div>
    <a-spin :spinning="loginState.spinning">
      <div class="container flex space_center align_items">
        <div class="login" v-show="loginState.isLogin">
          <dl class="fs20">
            <dt class="font_normal">扫一扫登录</dt>
            <dd>请使用i国网 <span>打印微应用</span> 扫码，获取PIN登录</dd>
          </dl>
          <div class="login_one flex space_center align_items">
            <img class="login_code" id="qrcode" />
            <div class="login_pin">
              <a-input
                v-model:value="loginState.loginForm.pinCode"
                size="large"
                placeholder="请输入PIN码"
              />
              <a-button type="primary" size="large" block @click="login">登录</a-button>
              <a-button type="link" class="pos_right" @click="loginState.isLogin = fasle">去注册</a-button>
            </div>
          </div>
        </div>
        <div v-show="!loginState.isLogin" class="register">
          <a-form
            class="register_form"
            :model="loginState.form"
            :rules="loginState.column.rules"
            label-align="right"
            :label-col="{ span: 5, pull: 1 }" name="nest-messages" @finish="onFinish">
            <a-form-item name="printStationName" label="工作站名称">
              <a-input v-model:value="loginState.form.printStationName" size="large" placeholder="请输入工作站名称" />
            </a-form-item>
            <a-form-item name="printStationIp" label="本机IP">
              <a-input v-model:value="loginState.form.printStationIp" size="large" placeholder="请输入本机IP地址" />
            </a-form-item>
            <a-form-item name="printStationPosition" label="本机位置">
              <a-input v-model:value="loginState.form.printStationPosition" size="large" placeholder="请输入本机位置" />
            </a-form-item>
            <a-form-item class="submit">
              <a-button type="primary" size="large" html-type="submit">申请注册打印工作站</a-button>
              <a-button type="link" class="pos_right" @click="loginState.isLogin = true">去登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import QRCode from 'qrcode'
import { randomRange } from '@renderer/utils/index'
// 引入模块
import { message } from 'ant-design-vue'
import column from './column'
import api from '@renderer/api/login'
import { useRouter } from 'vue-router'
const router = useRouter()
const loginState = reactive({
  spinning: false,
  column,
  isLogin: true,
  form: {
    printStationName: '',
    printStationIp: '',
    printStationPosition: ''
  },
  loginForm: {
    pinCode: '876458'
  }
})
//注册
const onFinish = (values) => {
  window.api.fetchData(api.register(values))
    .then(res => {
      if (res.code === 200) {
        message.success('已注册，正在等待审核！')
        setTimeout(() => {
          loginState.isLogin = true
        }, 2000)
      } else {
        message.error(res.data)
      }
    })
}
// 登录
const login = () => {
  window.api.fetchData(api.login(JSON.parse(JSON.stringify(loginState.loginForm))))
    .then(res => {
      if (res.code === 200) {
        message.success('登录成功！')
        window.api.setStoreData('user-info', res.data)
        setTimeout(() => {
          router.push('/print/manage')
        }, 1000)
      } else {
        // message.error(res.data)
      }
    }
    )
}
const createQRCode = () => {
  // 生成为 Data URL（图片）
  let text = `zipapp://appid.1007858/index.html?type=1&ip=${loginState.form.printStationIp}&random=${randomRange(0, 30)}`;
  QRCode.toDataURL(
    text,             // 二维码内容
    {
      width: 200,                       // 宽度（像素）
      height: 200,                      // 高度（像素）
      color: { dark: '#000', light: '#fff' } // 可选：颜色配置
    },
    (err, url) => {
      if (err) throw err;
      document.getElementById('qrcode').src = url; // 设置到 <img> 标签
    }
  );
}
onMounted(async () => {
  const localIP = await window.api.getLocalIP();
  loginState.form.printStationIp = localIP


  createQRCode()
})
</script>

<style lang="scss" scope>
@use './index.scss' as vars;
</style>
